<template>
    <div>
    <!-- 头部 -->
    <van-nav-bar title="频道管理" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <div class="content">
        <h1>点击删除频道</h1>
        <van-grid :gutter="10">
            <van-grid-item v-for="value in categoryList" :key="value.id" :text="value.name"
            @click="delFn(value.id)" />
        </van-grid>
    </div>
    <div class="content">
        <h1>点击添加频道</h1>
        <van-grid :gutter="10">
            <van-grid-item v-for="value in delCategoryList" :key="value.id" :text="value.name" 
            @click="addFn(value.id)" />
        </van-grid>
    </div>
    </div>
</template>

<script>
import { category } from "@/api/news"
export default {
    data(){
        return {
            categoryList: JSON.parse(localStorage.getItem("categoryList")) || [],   // 原来的栏目
            delCategoryList: JSON.parse(localStorage.getItem("delCategoryList")) || [] // 被删除的栏目
        }
    },
    created(){
        // 当缓存中没有数据的时候才需要调用接口，获取栏目的初始数据
        if(this.categoryList.length===0 && this.delCategoryList.length === 0){
            category().then(res=>{
                this.categoryList = res.data.data;
                // 这个页面不需要渲染“关注”和“头条”，因此需要把他们从数据删除
                let arr = this.categoryList.splice(0, 2)
                localStorage.setItem("defaultCategory", JSON.stringify(arr))
            })
        }
    },
    methods: {
        delFn(id){
            // 把被删除的添加delCategoryList数组中
            let res = this.categoryList.filter(item=>{
                return item.id === id
            })
            this.delCategoryList.push(...res)
            // 把不需要删除的过滤出来
            this.categoryList = this.categoryList.filter(item=>{
                return item.id != id
            })
        },
        addFn(id){
            // splice(下标值, 删除的个数)
            // arr.findIndex(function(item){
            //     item就是数组arr中的元素，
            //     这个函数需要返回一个条件判断，当条件成立的时候，会立刻把当前的item对应的下标值返回给findIndex方法。
            // })
            // 找到id对应的下标值
            let index = this.delCategoryList.findIndex(item=>{
                return item.id == id
            })
            // 从数组中删除栏目
            let res = this.delCategoryList.splice(index, 1)
            // 把删除的栏目添加到上方列表中
            // console.log(65, res);
            this.categoryList.push(...res)
        }
    },
    watch: {
        categoryList: {
            deep: true,
            handler(){
                // 缓存数据
                localStorage.setItem("categoryList", JSON.stringify(this.categoryList))
                localStorage.setItem("delCategoryList", JSON.stringify(this.delCategoryList))
            }
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  border-bottom: 1px solid #ddd;
  .van-icon{
      color: #000;
  }
}
.content{
    padding: 20px 10px;
    h1{
        font-size: 20px;
        font-weight: bold;
        margin: 10px 0px 20px 0px;
    }
    /deep/.van-grid{
        padding: 0 10px;
        .van-grid-item__content{
            border: 1px solid #ddd;
            .van-grid-item__text{
            font-size: 16px;
            }
        }
    }
}
</style>